<template>
  <div class="declaration-menu">
    <div class="declaration-container">
      <div v-if="menuType == 1">
        <formInput label="服务单ID" v-model="form1.bh" />
        <formInput label="服务单名称" v-model="form1.mc" />
        <formSelect
          label="一级分类"
          v-model="form1.fl1"
          :options="oneOptions"
        />
        <formSelect
          label="二级分类"
          v-model="form1.fl2"
          :options="twoOptions"
        />
        <formDate label="提交至IT工作台-开始" v-model="form1.ksrq1" />
        <formDate label="提交至IT工作台-结束" v-model="form1.jsrq1" />
        <formDate label="服务单截止-开始" v-model="form1.ksrq2" />
        <formDate label="服务单截止-结束" v-model="form1.jsrq2" />
      </div>
      <div v-if="menuType == 2">
        <formInput label="服务单ID" v-model="form2.bh" />
        <formInput label="服务单名称" v-model="form2.mc" />
        <formSelect
          label="一级分类"
          v-model="form2.fl1"
          :options="oneOptions"
        />
        <formSelect
          label="二级分类"
          v-model="form2.fl2"
          :options="twoOptions"
        />
        <formDate label="提交至IT工作台-开始" v-model="form2.ksrq1" />
        <formDate label="提交至IT工作台-结束" v-model="form2.jsrq1" />
        <formDate label="服务单截止-开始" v-model="form2.ksrq2" />
        <formDate label="服务单截止-结束" v-model="form2.jsrq2" />
        <formInput label="所属团队" v-model="form2.team" />
        <formInput label="当前办理人" v-model="form2.person" />
      </div>
      <div v-else-if="menuType == 8">
        <formInput label="服务单ID" v-model="form8.bh" />
        <formInput label="服务单名称" v-model="form8.mc" />
        <formDate label="预计提交时间-开始" v-model="form8.ksrq" />
        <formDate label="预计提交时间-结束" v-model="form8.jsrq" />
      </div>
      <div v-else-if="menuType == 9">
        <formInput label="年份" v-model="form9.year" />
        <formInput label="姓名" v-model="form9.person" />
        <formInput label="部门" v-model="form9.dept" />
        <formInput label="项目名称" v-model="form9.projectName" />
      </div>
      <!-- 类型四 -->
      <div v-else-if="menuType == 10">
        <formInput label="需求编号" v-model="form10.bh" />
        <formInput label="服务单名称" v-model="form10.mc" />
      </div>
      <div class="tabs-btn">
        <div class="btn btn-type01" @click="resetForm">重置</div>
        <div class="btn btn-type02" @click="handleConfirm">确认</div>
      </div>
    </div>
    <transition name="declaration-mask">
      <div class="declaration-mask"></div>
    </transition>
  </div>
</template>
<script>
import formInput from "@/components/form-input";
import formSelect from "@/components/form-select";
import formDate from "@/components/form-date";
import { Toast } from "vant";
import { getTableCategory, getTableOptionStatus } from "@/api/declaration";
import {
  createForm1,
  createForm2,
  createForm8,
  createForm9,
  createForm10,
} from "@/utils/declaration-data";

export default {
  components: {
    formInput,
    formSelect,
    formDate,
  },
  props: {
    menuType: {
      type: [String, Number],
      default: 1,
    },
  },
  data() {
    return {
      form1: createForm1(),
      form2: createForm2(),
      form8: createForm8(),
      form9: createForm9(),
      form10: createForm10(),
      oneOptions: [],
      twoOptions: [],
      menuOption: [],
    };
  },
  mounted() {
    this.getTableCategory();
    this.getTableOptionStatus();
  },
  methods: {
    getTableCategory() {
      getTableCategory({}).then((res) => {
        this.oneOptions = res.data.one;
        this.twoOptions = res.data.two;
      });
    },
    getTableOptionStatus() {
      getTableOptionStatus({}).then((res) => {
        this.menuOption = res.data.map((item) => {
          return { id: item, value: item };
        });
      });
    },
    resetForm() {
      this.form1 = createForm1();
      this.form2 = createForm2();
      this.form8 = createForm8();
      this.form9 = createForm9();
      this.form10 = createForm10();
    },
    handleConfirm() {
      let form = null;
      if (this.menuType == 1) {
        console.log(this.form1);
        if (
          new Date(this.form1.jsrq1).getTime() <
            new Date(this.form1.ksrq1).getTime() ||
          new Date(this.form1.jsrq2).getTime() <
            new Date(this.form1.ksrq2).getTime()
        ) {
          Toast("请检查结束时间不能在开始时间之前");
          return;
        }
        form = this.form1;
      } else if (this.menuType == 2) {
        if (
          new Date(this.form2.jsrq1).getTime() <
            new Date(this.form2.ksrq1).getTime() ||
          new Date(this.form2.jsrq2).getTime() <
            new Date(this.form2.ksrq2).getTime()
        ) {
          Toast("请检查结束时间不能在开始时间之前");
          return;
        }
        form = this.form2;
      } else if (this.menuType == 8) {
        if (
          new Date(this.form8.jsrq).getTime() <
          new Date(this.form8.ksrq).getTime()
        ) {
          Toast("请检查结束时间不能在开始时间之前");
          return;
        }
        form = this.form8;
      } else if (this.menuType == 9) {
        form = this.form9;
      } else if (this.menuType == 10) {
        form = this.form10;
      }
      this.$emit("getFrom", form);
    },
  },
};
</script>
<style lang="less" scoped>
.declaration-menu {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: calc(60px + env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.7);
  padding-top: 50px;
  .declaration-container {
    background: #fff;
    // TODO
    z-index: 10;
  }
  .tabs-btn {
    display: flex;
    padding: 15px;
    .btn {
      flex: 1;
      height: 34px;
      line-height: 34px;
      text-align: center;
      border: 1px solid rgba(143, 146, 160, 1);
      border-radius: 5px;
      font-size: 14px;
      color: rgba(49, 53, 65, 1);
      &.btn-type01 {
        margin-right: 8px;
      }
      &.btn-type02 {
        margin-left: 8px;
        color: #fff;
        background: rgba(0, 153, 102, 1);
        border: 1px solid rgba(0, 153, 102, 1);
      }
    }
  }
  // .declaration-mask {
  // position: fixed;
  // left: 0;
  // right: 0;
  // top: 0;
  // bottom: calc(60px + env(safe-area-inset-bottom));
  // background: rgba(0,0,0,0.7);
  // }
}
.declaration-mask-enter-active,
.declaration-mask-leave-active {
  transition: opacity 0.5s;
}
.declaration-mask-enter, .declaration-mask-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
</style>